<section class="notification-confirm-modal__content {{this.baseClass}}">
  <section class="{{this.baseClass}}__main {{this.baseClass}}__header">
    <div class="{{this.baseClass}}__title">
      <strong>DataHub Tips</strong>
    </div>
    <div class="{{this.baseClass}}__item">
      You can use Markdown to format the content and preview it before sending.
    </div>
  </section>
  <div class="{{this.baseClass}}__main">
    <section>
      <div class="{{this.baseClass}}__title">
        <strong>Formatting cheat sheet</strong>
      </div>
      <div class="{{this.baseClass}}__item">
        Use the following syntax to format the content
      </div>
    </section>
    <section>
      <div class="{{this.baseClass}}__label"> Bold </div>
      <div class="{{this.baseClass}}__item">**bold text**</div>
    </section>
    <section>
      <div class="{{this.baseClass}}__label"> Italic </div>
      <div>*italicized text*</div>
    </section>
    <section>
      <div class="{{this.baseClass}}__label"> Link </div>
      <div>[title](http://www.linkedin.com)</div>
    </section>
    <section>
      <div class="{{this.baseClass}}__label"> Ordered List </div>
      <div class="{{this.baseClass}}__item">
        1. First item
        <br>
        2. Second item
        <br>
        3. Third item
      </div>
    </section>
    <section>
      <div class="{{this.baseClass}}__label">Unordered List</div>
      <div class="{{this.baseClass}}__item">
        - First item
        <br>
        - Second item
        <br>
        - Third item
      </div>
    </section>
    <section>
      <div class="{{this.baseClass}}__item">
        For more information on formatting like table, blockquote etc. Read more
        <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">
          <FaIcon @icon="external-link-alt" />
        </a>
      </div>
    </section>
  </div>
</section>